<template>
    <v-app>
      <v-app-bar
          app
          fixed
          :extension-height="50"
          elevate-on-scroll
          color="secondary"
          style="border-bottom: rgba(255, 255, 255, 0.12) solid 1px !important;"
      >
        <v-btn
            to="/"
            color="white"
            icon
        >
          <v-icon color="white">mdi-arrow-left</v-icon>
        </v-btn>
        <v-app-bar-title >{{ getCurrentPage.title }}  (直推{{ statistics.direct }} 有效{{ statistics.effective }}) </v-app-bar-title>
      </v-app-bar>
      <v-main>
        <v-simple-table dark class="primary">
          <template v-slot:default>
            <thead>
            <tr>
              <th v-for="(item,i) of getCurrentPage.listHeader" :key="i" class="pa-0 white--text text-center">
                {{ item.title }}
              </th>
            </tr>
            </thead>
            <tbody>
            <tr
                v-for="(item,i) of list"
                :key="i"
            >
              <td v-for="(_item,_i) of getCurrentPage.listHeader" class="pa-0 text-center white--text" :key="_i">
                {{ _item.handle(item[_item.value]) }}
              </td>
            </tr>
            </tbody>
          </template>
        </v-simple-table>
        <div v-if="!list.length" class="text-caption text-center pa-4 grey--text">
          <div class="pa-2">
            <v-icon size="125" color="primary lighten-1">mdi-file-image</v-icon>
          </div>
          <span class="primary--text text--lighten-2">暂无数据</span>
        </div>
        <div v-if="!!list.length" class="primary--text text-center">
          <div style="width: 120px;margin:auto;">
            <v-progress-linear
                indeterminate
                color="primary"
                rounded
                v-if="loadingMore" height="6"
            />
          </div>
          <template v-if="showPagination">
            <div
                class="pa-4 primary--text text--lighten-5"
                v-if="!loadingMore"
                @click="onPagination"
            >
              点击加载更多
            </div>
          </template>
          <div class="pa-4 primary--text text--lighten-2 text-caption" v-else>暂无更多数据</div>
        </div>
      </v-main>
    </v-app>
  </template>
  
  <script>
  import {useLoading} from "@/common/kit";
  import Xhr from "@/common/xhr";
  
  export default {
    components: {},
    data() {
      return {
        config: {
          title: "我的分享",
          api: '/api/user/myinvite',
          dataPath: 'data',
          listHeader: [
            {title: '用户地址', value: "id", handle: (value) => this.$formatAddress(value)},
            {title: '是否有效', value: "is_effective", handle: (value)=>{if (value>0){return "有"}else return "無"}},
            {
              title: '用户身份',
              value: "level",
              handle: (value) => ({0: "普通会员", 1: "V1", 2: "V2", 3: "V3", 4: "V4",5: "V5"}[value || '0'])
            },
            {title: '注册时间', value: "create_at", handle: (value) => this.$formatDate(value)},
          ],
        },
        showPagination: true,
        loadingMore: false,
        statistics:{},
        list: [],
        listForm: {
          page: 0,
          size: 50
        }
      }
    },
    computed: {
      getCurrentPage() {
        console.log(this.config)
        return this.config
      },
    },
    mounted() {
      this.init()
    },
    methods: {
      async init() {
        useLoading("数据加载中...")
        await this.getList()
        useLoading()
      },
      async getList() {
        const res = await Xhr.get(this.getCurrentPage.api, {params: this.listForm})
        const list = this.$get(res, "data.records", [])
        this.$set(this, 'statistics',this.$get(res, "data.statistics", []))
        if (list.length < this.listForm.size) {
          this.showPagination = false
        }
        this.$set(this, 'list', this.list.concat(list))
      },
      async onPagination() {
        if (!this.loadingMore) {
          this.loadingMore = true
          this.listForm.page = this.listForm.page + 1
          await this.getList()
        }
        this.loadingMore = false
      }
    }
  }
  </script>
  